<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { getShengCiBenList, removeShengCiBenWorldApi } from '../../api/request.js';
import { includeListGetItem } from '../../utils/index.js';
const type = ref(2);
const props = defineProps({});
onMounted(() => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
});
let platform = uni.getStorageSync('platform');
const center = ref(null);
const goback = async () => {
    uni.navigateBack();
};
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
const query = ref({
    page: 1,
    pageSize: 15,
    la: true,
    trigger: false
});
const list = ref([]);
onLoad(async (e) => {});
const fetchList = async (type = false) => {
    uni.showLoading({
        mask: true
    });
    let res = await getShengCiBenList(query.value);
    console.log(res);
    uni.hideLoading();
    if (!type || !list.value) {
        list.value = [];
    }
    list.value = list.value.concat(res.data.list);
    query.value.total = res.data.count;
    if (query.value.page * 15 >= query.value.total) {
        query.value.la = false;
    } else {
        query.value.la = true;
    }
};
onShow(async () => {
    fetchList();
});
const select = ref('');
const changeSelect = (e) => {
    select.value = e;
};
//最后点击的是谁
const nowIndex = ref(null);
//被点击过都在里面
const getIdList = ref([]);
//点击过是第几次点击
const statusList = ref({});
const playAudio = (id, url, status = false) => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
    uni.$emit('playAudio', http + `${url}`, true);
    nowIndex.value = id;
    const indexs = getIdList.value.findIndex((item) => item == id);
    if (indexs == -1) {
        getIdList.value.push(id);
    }
    //剪纸盒子的骡子
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
    } else {
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 1
                : 1;
    }
};

const returnItemClassStatus = (id) => {
    if (nowIndex.value) {
        let index = includeListGetItem(select.value == 0 ? getIdList.value : getIdLists.value, id);
        if (index == -1) {
            return 'none';
        }
        const zhege = statusList.value.id == id;
        if (zhege) {
            let num = statusList.value.status;
            if (num == 1) {
                return 'heide';
            } else if (num == 2) {
                return 'fanyi';
            } else if (num == 3) {
                return 'kong';
            }
        }
    } else {
        return 'none';
    }
};

const que = async () => {
    let res = await removeShengCiBenWorldApi({
        id: Array.from(selectList.value).join(',')
    });
    if (res.code == 1) {
        list.value = list.value.filter((item) => !selectList.value.has(item.id));
        selectList.value.clear();
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
    }

    center.value.close();
};

const selectList = ref(new Set());
const add = (id) => {
    if (selectList.value.has(id)) {
        selectList.value.delete(id);
    } else {
        selectList.value.add(id);
    }
};
const all = () => {
    if (list.value.length != selectList.value.size) {
        list.value.forEach((item) => selectList.value.add(item.id));
    } else {
        selectList.value.clear();
    }
};
const showPage = async (index) => {
    if (selectList.value.size < 1) {
        uni.showToast({
            title: '请勾选需要操作的单词',
            icon: 'none'
        });
        return;
    }
    if (index == 1) {
        let id = list.value
            .filter((item) => {
                if (selectList.value.has(item.id)) {
                    return item.name;
                }
            })
            .map((item) => item.name)
            .join(',');
        selectList.value.clear();
        uni.navigateTo({
            url: '/pages/common/shengcibenqianghuaxunlian?id=' + id
        });
    } else {
        center.value.open('center');
    }
};
const showTop = ref(false);
const handlePullDownRefresh = () => {
    if (query.value.la) {
        uni.showLoading({});
        query.value.page += 1;
        fetchList(true).finally(() => {
            uni.hideLoading();
        });
    }
};
const handleReachBottom = () => {
    query.value.trigger = true;
    query.value.page = 1;
    fetchList(false).finally(() => {
        query.value.trigger = false;
    });
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <view class="lefts uni-row">
                <image
                    class="left"
                    src="/static/img/goback-black.png"
                    @click="goback"
                    mode="widthFix"
                />
                <view class="title"> 生词本 </view>
            </view>
            <view class="rights uni-row">
                <view class="menu">
                    <view class="item uni-row dayin" @click="showTop = !showTop"> 打印 </view>
                    <view class="item uni-row yings" v-show="showTop"> 英译汉 </view>
                    <view class="item uni-row yingss" v-show="showTop"> 汉译英 </view>
                </view>
                <view class="submit uni-row" @click="all" v-if="list && list.length">
                    {{ list.length != selectList.size ? ' 全选' : '取消全选' }}
                </view>
            </view>
        </view>
        <scroll-view
            @scrolltolower="handlePullDownRefresh"
            refresher-enabled="true"
            :refresher-triggered="query.trigger"
            @refresherrefresh="handleReachBottom"
            scroll-y="true"
            class="body"
            v-if="list && list.length"
            :style="{ height: platform.gaodu - platform.dingbu - 96 - 28 - 100 + 'rpx' }"
        >
            <view class="" style="height: 20rpx" />
            <view
                class="item uni-row"
                :id="item.id"
                v-for="(item, index) in list"
                :key="index"
                :class="returnItemClassStatus(item.id)"
                @click="playAudio(item.id, item.detail.audio_file_name.word)"
            >
                <view class="left-wrap">
                    {{ item.name }}
                </view>
                <view class="fanti">
                    {{ item.detail.youdao_api }}
                </view>
                <image
                    @click.stop="add(item.id)"
                    :src="`/static/img/shengciben/${
                        selectList.has(item.id) ? 'selectyuan' : 'yuan'
                    }.png`"
                    class="icon"
                >
                </image>
            </view>
            <view class="" style="height: 20rpx" />
        </scroll-view>
        <view class="footers uni-row" v-if="list && list.length">
            <view
                class="uni-row"
                :class="index == 0 ? 'active' : 'default'"
                v-for="(item, index) in ['删除', '开始识记']"
                :key="index"
                @click="showPage(index)"
            >
                {{ item }}
            </view>
        </view>
    </view>
    <uni-popup ref="center">
        <view class="wai">
            <view class="title"> 提示 </view>
            <view class="label"> 请确认是否删除{{ selectList.size }}项单词! </view>
            <view class="footer uni-row">
                <view class="shi uni-row bts" @click="center.close()"> 取消 </view>
                <view class="shi uni-row bt" @click="que"> 确定 </view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="less">
.wai {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 96rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 38rpx 0 0;
        text-align: center;
    }

    .footer {
        margin-top: 56rpx;
        justify-content: space-around;

        .bt {
            background: #9561f3;
            color: #fff;
        }

        .bts {
            color: #9561f3;
            border: 2rpx solid #9561f3;
        }

        .shi {
            justify-content: center;
            border-radius: 36rpx;
            font-size: 24rpx;
            width: 184rpx;
            height: 68rpx;
        }
    }
}

.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            margin-left: 32rpx;
        }

        .menu {
            position: relative;

            .item {
                justify-content: center;
                width: 144rpx;
                height: 52rpx;
                font-size: 24rpx;

                &.dayin {
                    color: #fff;
                    background: #fa862c;
                    border-radius: 8rpx;
                }

                &.yings {
                    position: absolute;
                    top: 52rpx;
                    z-index: 100;
                    background: #ffe5d2;
                    border-radius: 8rpx 8rpx 0 0;
                    color: #fa862c;
                }

                &.yingss {
                    border-radius: 0 0 8rpx 8rpx;
                    position: absolute;
                    top: 104rpx;
                    z-index: 100;
                    color: #fa862c;
                    background: #fff3ea;
                }
            }
        }

        .submit {
            font-size: 24rpx;
            color: #fff;
            background-color: #9561f3;
            justify-content: center;
            width: 144rpx;
            height: 52rpx;
            border-radius: 8rpx;
            margin-left: 32rpx;
        }
    }

    .body {
        padding: 0 28rpx;

        .item {
            justify-content: space-between;
            height: 84rpx;
            margin-bottom: 16rpx;
            border-radius: 8rpx;
            padding: 0 28rpx;
            overflow: hidden;
            background-color: #fff;
            border-bottom: 1rpx solid #bcbcbc;

            &.heide {
                .left-wrap {
                    font-size: 36rpx;
                    color: #333333;
                    font-weight: 600;
                }
            }

            &.fanyi {
                .left-wrap {
                    font-size: 36rpx;
                    color: #333333;
                    font-weight: 600;
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.kong {
                .left-wrap {
                    opacity: 0;
                }

                .fanti {
                    opacity: 0;
                }
            }

            .left-wrap {
                font-size: 36rpx;
                color: #333333;
            }

            .fanti {
                font-size: 28rpx;
                color: #333333;
                opacity: 0;
                transition: 0.2s all;
            }

            .icon {
                flex-shrink: 0;
                width: 40rpx;
                height: 40rpx;
            }
        }
    }

    .footers {
        padding: 0 28rpx;

        .active {
            margin-right: 22rpx;
            background: #ef4828;
        }

        .default {
            background-color: #9561f3;
        }

        .active,
        .default {
            flex: 1;
            justify-content: center;
            color: #fff;
            height: 88rpx;
            border-radius: 16rpx;
        }
    }
}
</style>
